import React, { Component } from 'react';
import  Top from "../../components/Top"
import {connect} from "react-redux"
import {request_create_cartadd,request_create_cartsub,request_create_cartlist_clear} from "../../store/ationCreactor"
class Goodscart extends Component {
    totol(){
       return this.props.shoplist.reduce((t,item)=>{
          return t+item.salesPrice.value*item.count
        },0)
    }
    cartadd(params){
        this.props.request_cartadd(params)
    }
    cartsub(params){
        this.props.request_cartsub(params)
    }
    cartclear(){
        this.props.request_cartlist_clear()
    }
    render() {
        return (
            <div>
                     {/* 头部 */}
            <Top>全部商品</Top>
          <div className="shopplist">
          {
                 this.props.shoplist&& this.props.shoplist.map((item,index)=>{
                        return (
                            <div className='shopplist_one' key={index}>
                                <div className='shopplist_one_left'>
                                    <div className='shopplist_one_input'>
                                        <input type="checkbox" name="" id="" />
                                    </div>
                                    <div className='imgbox'>
                                        <img src={item.pic} alt="" />
                                    </div>
                                </div>
                                <div className='shopplist_one_right'>
                                    <p className='name'>{item.brandEN}{item.brand}{item.name}</p>
                                    <p className='p2'>{item.capacity}</p>
                                    <div className='p3'>包邮包税</div>
                                    <div className='Preferential'>满200/800,享超值换购</div>
                                    <div className='time'>3天后恢复原价</div>
                                    <div className='money'>
                                        <p>¥{item.salesPrice.value}</p>
                                        <div className='anniu'>
                                            <button onClick={()=>{this.cartsub(item)}}>-</button>
                                            <p>{item.count}</p>
                                            <button onClick={()=>{this.cartadd(item)}}>+</button>
                                        </div>
                                    </div>
                                    <div className='xiangou'>限购8件</div>
                                </div>
                                <div className='settlement'>
                <div className='settlement_1'>
                <div className='settlement_left'>
                    <input type="checkbox" />
                    <span>全选</span>
                </div>
                <div className='settlement_right'>
                    <p>总价: <span>¥{this.totol()}</span></p>
                    <p className='clearcart' onClick={()=>{this.cartclear()}}>清除购物车</p>
                    <button>去结算 <span>({this.props.shoplist.length})</span></button>
                </div>
            </div>
            </div>
                            </div>
                            
                        )
                    })
                }
          </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{
        return {
            'shoplist': state.shopcartlist
        }
       
    },
    (dispatch)=>{
        return {
            request_cartadd(params){
                dispatch(request_create_cartadd(params))
            },
            request_cartsub(params){
                dispatch(request_create_cartsub(params))
            },
            request_cartlist_clear(){
                dispatch(request_create_cartlist_clear())
            }
        }
    }
)(Goodscart);